<template>
  <el-row class="serverIoLoad">
    <el-col :span="24" class="serverIoLoad-box">
      <div
        id="container"
        class="serverIoLine"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></div>
    </el-col>
  </el-row>
</template>>

<script>
import { getSqlCheckSpace } from "@/api/index.js";
import bus from "common/bus.js";
import { Line } from "@antv/g2plot";
import Isnull from "@/utils/ObjectIsNull";
export default {
  data() {
    return {
      timerName: "IoLoad",
      timerEventName: "timerIoLoad",
      timerInterval: 1000 * 60,
      selectedMonID: "",
      LinePlot: "",
      LineData: [],
      loading: false,
    };
  },
  created() {
    bus.$on("selectedMonIDSqlServer", (msg) => {
      this.selectedMonID = msg;
    this.restData()
          this.initGetData()
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
      }
    });
  },
  mounted() {
    this.initLine();
  },
  computed: {},
  methods: {
    initGetData() {
      this.loading = true;
    //   this.LineData=[]
      getSqlCheckSpace({ dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP })
        .then((_) => {
          this.LineData=[]
          
            _.forEach((item) => {
              this.LineData.push(
                {
                  deta: item.RecordTime,
                  value: item.dataPages,
                  category: "占用空间",
                },
                {
                  deta: item.RecordTime,
                  value: item.reservedPageCount,
                  category: "保留页",
                },
                {
                  deta: item.RecordTime,
                  value: item.usedPageCount,
                  category: "已使用页",
                }
              );
            });
            // console.log(this.LineData)
            this.LinePlot.changeData(this.LineData);
            this.loading = false;
          
        })
        .catch((_) => {})
        .finally((_) => {});
    },
    initLine() {
      this.LinePlot = new Line("container", {
        data: this.LineData,
        xField: "deta",
        yField: "value",
        seriesField: "category",
        legend: false,
        xAxis: false,
        color: ["#1979C9", "#D62A0D", "#FAA219"],
      });

      this.LinePlot.render();
    },
    restData(){
        this.LineData=[];
       
    }
    
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    this.LinePlot.destroy()
    bus.$off('selectedMonIDSqlServer')
    
  },
  watch:{
     
      
  }
};
</script>
<style scoped>
.serverIoLoad {
  height: 83%;
  margin-bottom: 0 !important;
}
.serverIoLoad-box {
  height: 100%;
}
.serverIoLine {
  height: 100%;
}
.serverIoText-box {
  height: 28%;
  text-align: center;
  margin-top: 0.7%;
  overflow: hidden;
}
.textIo {
  color: seashell;
  font-size: large;
}
</style>